<template>
  <div class="detail">
    <div class="info">
      <div class="title">活动详情</div>
      <a-row style="padding: 0 20px;">
        <a-col style="margin-bottom: 10px;" :span="6">小组编号：{{data.activityCode}}</a-col>
        <a-col style="margin-bottom: 10px;" :span="6">小组名称：{{data.activityName}}</a-col>
        <a-col style="margin-bottom: 10px;" :span="6">活动类型：{{data.activityType === 1 ? '非强制性' : '强制性'}}</a-col>
        <a-col style="margin-bottom: 10px;" :span="6">活动地点：{{data.activityLocation}}{{data.activityAddress}}</a-col>
        <a-col style="margin-bottom: 10px;" :span="6">活动开始时间：{{data.activityBeginDate}}</a-col>
        <a-col style="margin-bottom: 10px;" :span="6">报名截止日期：{{data.registrationEndDate}}</a-col>
        <a-col style="margin-bottom: 10px;" :span="6">当前活动人数：{{data.currentPeople}} / {{data.serverPeople}}</a-col>
        <a-col style="margin-bottom: 10px;" :span="6">
          当前状态：
          <span v-if="data.activityStatus === 1">待开始</span>
          <span v-if="data.activityStatus === 2" style="color: green;">进行中</span>
          <span v-if="data.activityStatus === 3">已结束</span>
        </a-col>
      </a-row>
    </div>
    <a-tabs type="card" style="margin-bottom: 0;">
        <a-tab-pane key="1" tab="筹备期">
          <preparation></preparation>
        </a-tab-pane>
        <a-tab-pane key="2" tab="形成期/转折期/成熟期">
          <mature :detail="data"></mature>
        </a-tab-pane>
        <a-tab-pane key="3" tab="结束期">
          <end :detail="data"></end>
        </a-tab-pane>
      </a-tabs>
  </div>
</template>

<script>
import { detail } from '@/api/sjsk/activity/group'
import preparation from './components/preparation/index'
import mature from './components/mature/index'
import end from './components/end/index'
export default {
  name: "detail",
  components:{
    preparation,
    mature,
    end
  },
  data() {
    return {
      data: {}
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      detail({activityId: this.$route.query.id}).then(res => {
        this.data = res.result
        console.log(this.data);
      })
    }
  }
}
</script>

<style lang="less" scoped>
  ::v-deep .ant-tabs-nav-wrap{
    padding-left: 300px;
  }
  ::v-deep .ant-tabs-bar{
    margin-bottom: 0;
  }
.detail{
  .info{
    padding: 20px;
    background-color: #fff;
    margin-bottom: 30px;
    .title{
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 30px;
    }
  }
}
</style>